<template>
    <view-box>
        <div class="positioninformati">
            <p class="" align="center" >
                <span onclick="history.go(-1)" style="position: relative;left: -2.9rem;">
                    <i slot="icon" class="iconfont icon-zuobian"></i>
                </span>
                <span>资讯</span>
            </p>
        </div>
        <div class="background-informati">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1574311747,1762160439&fm=27&gp=0.jpg" alt="">
            <s-Search style="margin-top: .1rem;position: absolute;"></s-Search>
        </div>

        <div class="">
            <tab active-color="#e5191a" custom-bar-width="0">
                <tab-item @on-item-click="informations">首页</tab-item>
                <tab-item  @on-item-click="questionsinfors">问答</tab-item>
                <tab-item selected @on-item-click="attentions">关注</tab-item>
            </tab>

            <flexbox orient="vertical">
                <flexbox-item  v-for="(i, index) in 2" :key="index">
                    <div class="back-question">
                        <div class="flex-demo">
                            <div class="verti-questi">
                                <p class="p-img-ques">
                                    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2537627520,3119182571&fm=27&gp=0.jpg" alt="">
                                </p>
                                <p class="p-title-attentio">
                                    <span style="font-size:.20833rem;">默写生 发表了提问</span>
                                </p>
                            </div>
                            <div class="attenti-text-col" align="center">
                                投递的简历显示HR有意向，为什么不通知去面试呢？
                            </div>
                            <div class="answer-col">
                                <p style="margin-left: .20833rem">
                                    <span style="color: #999999;">
                                        <i slot="icon" class="iconfont icon-bianji"></i>
                                        回答
                                    </span>
                                </p>
                                <p align="right" style="margin-right: .20833rem;">
                                    <span style="color:#999;">
                                        <i slot="icon" class="iconfont icon-pinglun"></i>764
                                    </span>
                                </p>
                                <p align="right" style="margin-right: .20833rem;">
                                    <span style="color:#999;">
                                        <i slot="icon" class="iconfont icon-shoucang"></i>收藏
                                    </span>
                                </p>
                            </div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </flexbox-item>
            </flexbox>

        </div>

    </view-box>
</template>
<script>
import { ViewBox, Box, Flexbox, FlexboxItem, Divider, Tab, TabItem, GroupTitle, Scroller } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Flexbox,
    FlexboxItem,
    Divider,
    Tab,
    TabItem,
    GroupTitle,
    Scroller
  },
  methods: {
    informations () {
      this.$router.push({ path: '/information' })
    },
    questionsinfors () {
      this.$router.push({ path: '/questionsinfors' })
    },
    attentions () {
      this.$router.push({ path: '/attentionps' })
    }
  }
}
</script>
<style scoped>
    .vux-flexbox .vux-flexbox-item:first-child {
        margin-left: 2.8%!important;
        margin-top: 0!important;
    }
    .background-informati{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 2.7430rem;
        margin-top: 1.1111rem;
        position: relative;
    }
    .background-informati img{
        width: 100%;
        height: 100%;
    }
    .positioninformati{
        width: 100%;
        height: 1.1111rem;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
    }
    .attenti-text-col{
        width:6.68055rem;
        height: .8055rem;
        background:#f8f8f8;
        border-radius: .1rem;
        font-size:.25rem;
        line-height:.8055rem;
        margin-left: .20833rem;
    }
    .positioninformati p{
        width: 100%;
        height: 1.1111rem;
        line-height: .6rem;
    }
    .positioninformati span{
        font-size:.38194rem;
        color: #000;
    }
    .back-question{
        background: #fff;
        width: 94.4%;
        margin-left: 2.8%;
    }
    .verti-questi{
        display: flex;
        width: 100%;
    }
    .p-img-ques{
        width: 20%;
    }
    .p-img-ques img{
        width: 90%;
        border-radius: 100%;
        margin-top: .20833rem;
        margin-left: .20833rem;
    }
  .p-title-attentio{
      width: 80%;
      line-height: 1.1111rem;
      color:#999999;
      margin-left: .20833rem;
  }
    .p-title-attentio p{
        font-size:.208333rem;

    }
    .answer-col{
        width: 100%;
        display: flex;
        font-size:.20833rem;
        height: .63888rem;
        line-height: .63888rem;
    }
    .answer-col p{
        width: 33.33%;
    }
    .answer-col button{
        width:1.13888rem;
        height: .347222rem;
        background: #fef3f3;
        border: #fef3f3 1px solid;
        font-size:.19rem;
        color:#e5191a;
    }
</style>